<template>
	<view class="app login">
		<!-- 背景 -->
		<image class="bg" :src="logoImage"></image>

		<!-- 页面内容开始 -->
		<view class="content">
			<view class="login-view">
				<view class="left">
					<view class="title">欢迎登录</view>
					<view class="text">辽宁省食品质量与安全学会</view>
					<view class="icon">
						<image :src="formData.logo"></image>
					</view>
				</view>
				<view class="right">
					<!-- 登录 -->
					<view class="main-view" v-if="type==='login'">
						<view class="form-view">
							<view class="login-tabs">
								<view class="login-tab">
									<text class="login-text active">账号密码登录</text>
								</view>
							</view>
							<view class="form-item form-border">
								<input class="form-input" v-model="form1.username" type="text" :maxlength="50"
									placeholder="请输入账号或手机号" placeholder-style="'color':'#8e8e8e'" />
							</view>
							<view class="form-item form-border">
								<input class="form-input" v-model="form1.password" type="password" placeholder="请输入密码"
									placeholder-style="'color':'#8e8e8e'" />
							</view>
						</view>
						<view class="login-btn">
							<button class="btn success circle" hover-class="hover" @click="login" :plain="false"
								type="success" shape="circle" :hair-line="false">登 录</button>
						</view>

						<!-- 底部信息 -->
						<view class="footer">
							<text class='btn-a' @click="changeTab('forget')">找回密码</text>
							<text class="center-line">|</text>
							<text class='btn-a' @click="changeTab('register')">注册账号</text>
						</view>
					</view>
					<!-- 注册 -->
					<view class="main-view" v-if="type==='register'">
						<view class="back-view" @click="changeTab('login')"><text>去登录</text></view>
						<view class="form-view">
							<view class="login-tabs">
								<view class="login-tab">
									<text class="login-text active">账号注册</text>
								</view>
							</view>
							<view class="form-item form-border">
								<input class="form-input" v-model="form1.username" type="text" :maxlength="32"
									placeholder="请输入账号" placeholder-style="'color':'#8e8e8e'" />
							</view>
							<view class="my-tips">账号以字母开头，长度在4~32之间，只能包含字母、数字和下划线</view>
							<view class="form-item form-border">
								<input class="form-input" v-model="form1.password" type="password" placeholder="请输入密码"
									placeholder-style="'color':'#8e8e8e'" />
							</view>
							<view class="form-item form-border">
								<input class="form-input" v-model="form1.password2" type="password" placeholder="请再次输入密码"
									placeholder-style="'color':'#8e8e8e'" />
							</view>
						</view>
						<view class="login-btn">
							<button class="btn success circle" hover-class="hover" @click="register" :plain="false"
								type="success" shape="circle" :hair-line="false">注 册</button>
						</view>

						<view class="footer">
							<label>
								<checkbox-group @change="checkboxChange">
									<checkbox class="footer-checkbox" value="false" :checked="form1.agreement"
										active-color="#737373" shape="circle"></checkbox><text>同意</text>
								</checkbox-group>
							</label>
							<!-- 协议地址 -->
							<navigator url="" open-type="navigate" style="color: #007AFF;">《用户协议》</navigator>
						</view>
					</view>
					<!-- 找回密码 -->
					<view class="main-view" v-if="type=='forget'">
						<view class="back-view" @click="changeTab('login')"><text>去登录</text></view>
						<view class="form-view">
							<view class="tips">若你忘记了密码，可在此重置新密码。</view>
						
							<view class="form-item form-border">
								<!-- 文本框 -->
								<input class="form-input" v-model="form1.mobile" type="text" :maxlength="11" placeholder="请输入手机号码" placeholder-style="'color':'#8e8e8e'" />
							</view>
						
							<view class="form-item form-border">
								<!-- 文本框 -->
								<input class="form-input" v-model="form1.password" type="password" placeholder="请输入新密码" placeholder-style="'color':'#8e8e8e'" />
							</view>
							<view class="form-item form-border">
								<!-- 文本框 -->
								<input class="form-input" v-model="form1.password2" type="password" placeholder="请再次输入新密码" placeholder-style="'color':'#8e8e8e'" />
							</view>
						
						
							<view class="form-item form-border">
								<!-- 文本框 -->
								<input class="form-input" v-model="form1.code" type="number" :maxlength="6" placeholder="请输入验证码" placeholder-style="'color':'#8e8e8e'" />
								<!-- 验证码倒计时开始 -->
								<vk-data-verification-code  seconds="60" :mobile="form1.mobile" type="reset-pwd" custom-style="font-size: 28rpx;"></vk-data-verification-code>
								<!-- 验证码倒计时结束 -->
						
							</view>
						
						</view>
						<view class="login-btn">
							<button class="btn success circle" hover-class="hover" shape="circle" @click="resetPassword" :plain="false" :hair-line="false" type="success">重置密码</button>
						</view>
					</view>

				</view>
			</view>

			<!-- 底部版权 -->
			<view class="copyright">
				<view class="row">
					Copyright {{ formData.banquan }}
				</view>
				<view class="row">
					备案号：
					<a href="https://beian.miit.gov.cn/" target="_blank">{{ formData.beian1 }}</a>
				</view>
			</view>
		</view>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	import config from "@/app.config.js";

	let $GLOBAL = getApp().globalData;

	export default {
		data() {
			// 页面数据变量
			return {
				type: 'login',
				
				isRotate: false,
				
				// init请求返回的数据
				formData: $GLOBAL.site,
				// 表单请求数据
				form1: {
					agreement: true,
					username: '',
					password: '',
					password1: '',
				},
				scrollTop: 0,
				logoImage: "/static/imgs/loginbg.jpg",
				
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			uni.$once('site-init', () => {
				this.formData = $GLOBAL.site;
			})
			vk = uni.vk;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {


		},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			changeTab(type) {
				if(type == 'forget'){
					vk.alert('尚未接入手机验证，无法自助修改密码。请联系管理员重置密码。')
					return
				}
				this.reset();
				this.type = type;
			},
			reset() {
				this.form1 = {
					agreement: false,
					username: '',
					password: '',
					password2: '',
				}
			},
			// 页面数据初始化函数
			init(options = {}) {
				const eventChannel = this.getOpenerEventChannel();
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				if (eventChannel.on) {
					eventChannel.on('data', (data) => {
						this.type = data.type
					});
				}
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 账号密码登录
			login() {
				let that = this;
				if (that.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				const {
					agreement,
					username,
					password
				} = that.form1;
				// if (!agreement) {
				// 	vk.toast('请阅读并同意用户服务及隐私协议', "none");
				// 	return;
				// }
				if (username.length < 4) {
					vk.toast('账号至少4位长度', "none");
					return;
				}
				if (!vk.pubfn.test(password, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				// 登录操作
				that.isRotate = true;
				var form1 = that.form1;
				vk.userCenter.login({
					data: form1,
					//loading:false,
					success: (data) => {
						
						that.isRotate = false;
						vk.toast("登录成功!");
						
						setTimeout(() => {
							// 跳转到首页,或页面返回
							that.login_success(data);
						}, 1000);
					},
					complete: () => {
						that.isRotate = false;
					}
				});
			},
			login_success(data) {
				let that = this;
				// 检查是否有指定跳转的页面
				if (vk.navigate.getOriginalPage()) {
					vk.navigate.originalTo();
					return false;
				}
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();
				
				if (pages.length > 1 &&
					pages[pages.length - 2] &&
					pages[pages.length - 2].route &&
					pages[pages.length - 2].route.indexOf('login/index') == -1
				) {
					const eventChannel = that.getOpenerEventChannel();
					eventChannel.emit('loginSuccess', {});
					vk.navigateBack();
				} else {
					// 进入首页
					vk.navigateToHome();
				}
			},
			
			checkboxChange(e) {
				let that = this;
				let value = e.detail.value || [];
				if (value.length > 0 && value[0]) {
					that.form1.agreement = true;
				} else {
					that.form1.agreement = false;
				}
			},
			// 注册
			register() {
				let that = this;
				if (that.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				const {
					agreement,
					username,
					password,
					password2,
				} = that.form1;
				
				if (!agreement) {
					vk.toast('请阅读并同意用户服务及隐私协议', "none");
					return;
				}
				if (username.length < 4) {
					vk.toast('账号至少4位长度', "none");
					return;
				}
				if (!vk.pubfn.test(password, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				if (!vk.pubfn.test(password2, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				if (password != password2) {
					vk.toast('两次密码必须相同!', "none");
					return;
				}
				that.isRotate = true;
				vk.userCenter.register({
					data: {
						username,
						password
					},
					success: (data) => {
						that.isRotate = false;
						if (data.type == "login") {
							vk.toast("登录成功!");
						} else {
							vk.toast("注册成功!");
						}
						setTimeout(() => {
							// 跳转到首页,或页面返回
							var pages = getCurrentPages();
							if (pages.length > 1) {
								vk.navigateBack();
							} else {
								// 进入首页
								vk.navigateToHome();
							}
						}, 1000);
					},
					complete: () => {
						that.isRotate = false;
					}
				});
			}
		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	@import url("../css/main.css");

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		opacity: .5;
	}

	.content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 200;

		.login-view {
			margin: auto;
			width: 720px;
			height: 460px;
			background: #fff;
			border-radius: 4px;
			box-shadow: 0 0 15px 0 rgba(14, 5, 11, .5);
			box-sizing: border-box;
			display: flex;

			.left {
				width: 280px;
				height: 100%;
				background-color: #fafafa;

				.title {
					margin-top: 100px;
					text-align: center;
					height: 24px;
					font-size: 24px;
					font-weight: 400;
					color: #666;
					letter-spacing: 2px;
				}

				.text {
					margin-top: 20px;
					text-align: center;
					color: #666;
				}

				.icon {
					margin: 20px auto;
					width: 80px;
					height: 80px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				flex: 1;
				padding: 0 30px;
			}
		}

		.form-view {
			.login-tabs {
				margin: 20px 0 20px;
				display: flex;
				text-align: center;
				font-size: 18px;

				.login-tab {
					.login-text {
						height: 40px;
						padding: 10px 0;
						box-sizing: border-box;
						line-height: 20px;
						cursor: pointer;
						display: inline-block;
						position: relative;
						font-size: 18px;
						color: #606266;
					}

					.active {
						font-weight: 700;
					}

					.active:after {
						display: block;
						position: absolute;
						content: "";
						width: 100%;
						height: 2px;
						border-radius: 2px;
						background: #222;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
					}
				}
			}

			.form-item {
				margin: 6px 0;
			}

			.form-border {
				border: 1px solid #eee;
			}

		}
	}
	.footer{
		margin-top:20px;
	}
	.main-view{
		position: relative;
		
		.btn-a.active {
			color: $primary-color;
		}
		
		.btn-a:hover {
			color: $primary-color;
		}
		
		.back-view {
			position: absolute;
			right: 0;
			height: 40px;
			line-height: 40px;
			color: #666;
			font-size: 14px;
			text-align: right;
		
			text {
				cursor: pointer;
			}
		}
		.my-tips{
			margin: -5px 10px 0;
			color: #999;
			font-size: 12px;
			text-align: left;
		}
	}

	

	.copyright {
		position: fixed;
		bottom: 0;
		padding: 20px 0;
		width: 100%;

		.row {
			padding: 10rpx 0;
			text-align: center;
			color: #aaa;

			a {
				color: #a1a1a1;
			}
		}
	}
</style>